import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _applyDecoratedDescriptor from "@babel/runtime/helpers/esm/applyDecoratedDescriptor";
import _filter from "lodash/filter";
import _sortBy from "lodash/sortBy";
import _map from "lodash/map";
import _isFunction from "lodash/isFunction";
import _forEach from "lodash/forEach";

var _dec, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, _class, _class2;

/**
 * FieldProp.js
 * @date 2018-10-03
 */
import React from 'react';
import { Form, Input, Checkbox, Divider, Icon, Popconfirm, Select, Button } from 'antd';
import { Bind } from 'lodash-decorators';
import uuid from 'uuid/v4';
import ValueList from 'components/ValueList';
import { hiddenColumnSep } from 'components/DynamicComponent/DynamicTable/utils';
import DynamicTable from 'components/DynamicComponent/DynamicTable';
import intl from 'utils/intl';
import notification from 'utils/notification';
import { attributeNameProp, attributeTypeProp, attributeValueProp, fieldLabelProp, fieldNameProp } from "../../config";
import DataType from "../../DataType"; // import ButtonPropModal from './ButtonPropModal';

import ButtonEditModal from "../ScriptEdit/ButtonEditModal";
import BtnTitleEditModal from "./BtnTitleEditModal";
var addButtonStyle = {
  marginLeft: 10
};
var linkButtonStyle = {
  width: 150,
  marginBottom: 4,
  marginRight: 10
};
var removeIconStyle = {
  cursor: 'pointer'
};
var buttonStyle = {
  marginLeft: 10,
  marginRight: 10,
  cursor: 'pointer'
};
var FieldProp = (_dec = Form.create({
  fieldNameProp: null,
  onValuesChange: function onValuesChange(props, changedValues, allValues) {
    if (_isFunction(props.onValuesChange)) {
      props.onValuesChange(props, changedValues, allValues);
    }
  }
}), _dec2 = Bind(), _dec3 = Bind(), _dec4 = Bind(), _dec5 = Bind(), _dec6 = Bind(), _dec7 = Bind(), _dec8 = Bind(), _dec9 = Bind(), _dec10 = Bind(), _dec(_class = (_class2 = /*#__PURE__*/function (_React$Component) {
  _inherits(FieldProp, _React$Component);

  var _super = _createSuper(FieldProp);

  function FieldProp() {
    var _this;

    _classCallCheck(this, FieldProp);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    _this.state = {
      linkButtonEditProps: {},
      btnPropEditModalVisible: false,
      linkBtnTitleEditModalProps: {}
    };
    return _this;
  }

  _createClass(FieldProp, [{
    key: "render",
    value: function render() {
      var field = this.props.field;
      var _this$state = this.state,
          btnPropEditModalVisible = _this$state.btnPropEditModalVisible,
          linkButtonEditProps = _this$state.linkButtonEditProps,
          linkBtnTitleEditModalProps = _this$state.linkBtnTitleEditModalProps;
      var propValues = {};

      _forEach(field.config, function (prop) {
        propValues[prop[attributeNameProp]] = prop[attributeValueProp];
      });

      return /*#__PURE__*/React.createElement(Form, null, this.renderFieldCommonProps(propValues), /*#__PURE__*/React.createElement(Divider, null), this.renderFieldTypeProps(propValues), btnPropEditModalVisible && /*#__PURE__*/React.createElement(ButtonEditModal, {
        key: linkButtonEditProps.btnKey,
        buttonEditProps: linkButtonEditProps,
        visible: btnPropEditModalVisible,
        onOk: this.handleLinkButtonModalOk,
        onCancel: this.handleLinkButtonModalCancel
      }), linkBtnTitleEditModalProps.visible && /*#__PURE__*/React.createElement(BtnTitleEditModal, Object.assign({
        onCancel: this.closeBtnTitleEditModal,
        onSave: this.changeLinkButtonName
      }, linkBtnTitleEditModalProps)));
    }
  }, {
    key: "renderFieldCommonProps",
    value: function renderFieldCommonProps() {
      var _this$props = this.props,
          form = _this$props.form,
          field = _this$props.field;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
        key: "autoSize"
      }, form.getFieldDecorator('autoSize', {
        initialValue: +field.width === 0,
        valuePropName: 'checked'
      })( /*#__PURE__*/React.createElement(Checkbox, null, intl.get('cpfm.ui.model.fieldAttr.autoSize').d('宽度自适应')))), /*#__PURE__*/React.createElement(Form.Item, {
        key: fieldNameProp,
        label: "\u5B57\u6BB5\u540D"
      }, form.getFieldDecorator(fieldNameProp, {
        initialValue: field[fieldNameProp],
        rules: [{
          required: true,
          message: intl.get('cpaas.common.validation.notNull', {
            name: intl.get('cpfm.ui.field.columnField.fieldName').d('字段名')
          })
        }]
      })( /*#__PURE__*/React.createElement(Input, null))), /*#__PURE__*/React.createElement(Form.Item, {
        key: fieldLabelProp,
        label: "\u6807\u9898"
      }, form.getFieldDecorator(fieldLabelProp, {
        initialValue: field[fieldLabelProp]
      })( /*#__PURE__*/React.createElement(Input, null))), /*#__PURE__*/React.createElement(Form.Item, {
        key: "align",
        label: "\u5BF9\u9F50\u65B9\u5F0F"
      }, form.getFieldDecorator('align', {
        initialValue: field.align
      })( /*#__PURE__*/React.createElement(ValueList, {
        options: [{
          value: 'left',
          meaning: intl.get('cpfm.ui.field.columnField.alignLeft').d('居左')
        }, {
          value: 'center',
          meaning: intl.get('cpfm.ui.field.columnField.alignCenter').d('居中')
        }, {
          value: 'right',
          meaning: intl.get('cpfm.ui.field.columnField.alignRight').d('居右')
        }]
      }))));
    }
  }, {
    key: "renderFieldTypeProps",
    value: function renderFieldTypeProps(propValues) {
      var field = this.props.field;
      var renderFunc = "renderFieldType".concat(field.componentType, "Props");

      if (_isFunction(this[renderFunc])) {
        return this[renderFunc](propValues);
      }

      return null;
    }
  }, {
    key: "renderFieldTypeLinkButtonProps",
    value: function renderFieldTypeLinkButtonProps() {
      var _this2 = this;

      var field = this.props.field;
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Form.Item, {
        colon: false,
        label: /*#__PURE__*/React.createElement(React.Fragment, null, intl.get('cpfm.ui.field.linkButton').d('LinkButton'), ":\xA0", /*#__PURE__*/React.createElement("a", {
          style: addButtonStyle,
          onClick: this.handleLinkButtonAddBtn
        }, intl.get('cpaas.common.button.create').d('新建')))
      }), _map(_sortBy(field.btns, 'orderSeq'), function (btnConfig, index) {
        var btnProps = {};

        _forEach(btnConfig, function (attr) {
          btnProps[attr[attributeNameProp]] = attr[attributeValueProp];
        });

        var btnKey = btnProps.btnKey;
        return /*#__PURE__*/React.createElement(Form.Item, {
          key: btnKey,
          className: "ant-form-item-without-help"
        }, /*#__PURE__*/React.createElement(Button, {
          style: linkButtonStyle,
          onClick: function onClick() {
            _this2.openPropEditModal(btnKey, btnProps, btnConfig, index);
          }
        }, btnProps.title), /*#__PURE__*/React.createElement(Icon, {
          type: "edit",
          style: buttonStyle,
          onClick: function onClick() {
            _this2.openBtnTitleEditModal(btnKey, btnProps, btnConfig, index);
          }
        }), /*#__PURE__*/React.createElement(Popconfirm, {
          title: intl.get('cpaas.common.message.confirm.remove').d('确定删除选中数据？'),
          onConfirm: function onConfirm() {
            return _this2.handleLinkButtonRemoveBtn(index);
          }
        }, /*#__PURE__*/React.createElement(Icon, {
          type: "close",
          style: removeIconStyle
        })));
      }));
    } // renderFieldTypeColumnFieldProps(propValues = {}) {
    //   const { form } = this.props;
    //   return (null);
    // }
    // 修改 按钮的名称

  }, {
    key: "changeLinkButtonName",
    value: function changeLinkButtonName(title) {
      var field = this.props.field;
      var _this$state$linkBtnTi = this.state.linkBtnTitleEditModalProps,
          btnConfig = _this$state$linkBtnTi.btnConfig,
          index = _this$state$linkBtnTi.index;
      var titleAttrName = 'title';
      field.btns[index] = _map(btnConfig, function (attr) {
        if (attr[attributeNameProp] === titleAttrName) {
          return _objectSpread(_objectSpread({}, attr), {}, _defineProperty({}, attributeValueProp, title));
        } else {
          return attr;
        }
      });
      this.closeBtnTitleEditModal();
    }
  }, {
    key: "openBtnTitleEditModal",
    value: function openBtnTitleEditModal(btnKey, btnProps, btnConfig, index) {
      this.setState({
        linkBtnTitleEditModalProps: {
          btnKey: btnKey,
          btnProps: btnProps,
          btnConfig: btnConfig,
          index: index,
          visible: true,
          title: btnProps.title
        }
      });
    }
  }, {
    key: "closeBtnTitleEditModal",
    value: function closeBtnTitleEditModal() {
      this.setState({
        linkBtnTitleEditModalProps: {
          visible: false
        }
      });
    }
    /**
     * 打开 按钮 属性编辑的 模态框
     */

  }, {
    key: "openPropEditModal",
    value: function openPropEditModal(btnKey, btnProps, btnConfig, index) {
      // const {config = {}} = this.props;
      this.setState({
        btnPropEditModalVisible: true,
        linkButtonRecord: {
          btnKey: btnKey,
          btnProps: btnProps,
          btnConfig: btnConfig,
          index: index
        },
        linkButtonEditProps: {
          extraParams: this.getButtonEditExtraParams(),
          propsValue: btnProps,
          // scripts: config.scripts,
          // components: config.fields,
          extraActions: this.getTableExtraActions()
        }
      });
    }
  }, {
    key: "getTableExtraActions",
    value: function getTableExtraActions() {
      var description = this.props.component.description;

      var tableInternalFuncsOptions = _map(DynamicTable.internalFuncs, function (internalFuncStr) {
        return /*#__PURE__*/React.createElement(Select.Option, {
          value: internalFuncStr,
          key: internalFuncStr
        }, intl.get(DynamicTable.internalFuncsInfo[internalFuncStr].descriptionIntlCode).d(DynamicTable.internalFuncsInfo[internalFuncStr].descriptionIntlDefault));
      });

      return /*#__PURE__*/React.createElement(Select.OptGroup, {
        label: "".concat(description, "Table\u4E8B\u4EF6")
      }, tableInternalFuncsOptions);
    }
    /**
     * 获取额外的参数类型
     * @return {{value: string, meaning: string, getParamValueElement: (function(*, *, *): *)}[]}
     */

  }, {
    key: "getButtonEditExtraParams",
    value: function getButtonEditExtraParams() {
      var _this$props$component = this.props.component,
          component = _this$props$component === void 0 ? {} : _this$props$component;
      var columns = component && component.fields || [];
      var hiddenColumns = component && component.hiddenColumns || [];
      return [{
        value: 'c',
        meaning: '列参数',
        getParamValueElement: function getParamValueElement() {
          return /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement(Select.OptGroup, {
            label: "\u5217\u53C2\u6570"
          }, _map(columns, function (column) {
            return /*#__PURE__*/React.createElement(Select.Option, {
              value: column.fieldName,
              key: column.fieldName
            }, column.fieldLabel);
          })), /*#__PURE__*/React.createElement(Select.OptGroup, {
            label: "\u9690\u85CF\u57DF"
          }, _map(hiddenColumns, function (hiddenColumn) {
            var _hiddenColumn$attribu = hiddenColumn[attributeValueProp].split(hiddenColumnSep),
                _hiddenColumn$attribu2 = _slicedToArray(_hiddenColumn$attribu, 2),
                value = _hiddenColumn$attribu2[0],
                meaning = _hiddenColumn$attribu2[1];

            return /*#__PURE__*/React.createElement(Select.Option, {
              value: value,
              key: value
            }, meaning);
          })));
        }
      }];
    }
  }, {
    key: "handleLinkButtonAddBtn",
    value: function handleLinkButtonAddBtn(e) {
      var _ref, _ref2;

      e.preventDefault();
      var field = this.props.field;
      var newBtnKey = uuid();
      field.btns.push([(_ref = {}, _defineProperty(_ref, attributeNameProp, 'title'), _defineProperty(_ref, attributeValueProp, field[fieldLabelProp]), _defineProperty(_ref, attributeTypeProp, DataType.String), _ref), (_ref2 = {}, _defineProperty(_ref2, attributeNameProp, 'btnKey'), _defineProperty(_ref2, attributeValueProp, newBtnKey), _defineProperty(_ref2, attributeTypeProp, DataType.String), _ref2)]);
      this.forceUpdate(); // todo 更新 属性编辑界面
    }
  }, {
    key: "handleLinkButtonRemoveBtn",
    value: function handleLinkButtonRemoveBtn(removeIndex) {
      var field = this.props.field;

      if (field.btns.length <= 1) {
        notification.warning({
          message: 'LinkButton 至少要有一个按钮'
        });
        return;
      }

      field.btns = _filter(field.btns, function (btn, index) {
        return index !== removeIndex;
      });
      this.forceUpdate(); // todo 更新 属性编辑界面
    }
  }, {
    key: "handleLinkButtonModalOk",
    value: function handleLinkButtonModalOk(_ref3) {
      var attrConfig = _ref3.attrConfig;
      var field = this.props.field;
      var _this$state$linkButto = this.state.linkButtonRecord,
          index = _this$state$linkButto.index,
          btnKey = _this$state$linkButto.btnKey,
          btnProps = _this$state$linkButto.btnProps; // orderSeq btnKey title

      field.btns[index] = [].concat(_toConsumableArray(attrConfig), [{
        attributeName: 'btnKey',
        value: btnKey,
        attributeType: DataType.String
      }, {
        attributeName: 'orderSeq',
        value: btnProps.orderSeq,
        attributeType: DataType.String
      }, {
        attributeName: 'title',
        value: btnProps.title,
        attributeType: DataType.String
      }]); // todo 更新 field
      // this.props.updateField(component, {...field, btns: {...field.btns, [btnKey]: btnConfig}})

      this.setState({
        btnPropEditModalVisible: false,
        linkButtonEditProps: {},
        linkButtonRecord: {}
      });
    }
  }, {
    key: "handleLinkButtonModalCancel",
    value: function handleLinkButtonModalCancel() {
      this.setState({
        btnPropEditModalVisible: false,
        linkButtonEditProps: {},
        linkButtonRecord: {}
      });
    }
  }]);

  return FieldProp;
}(React.Component), (_applyDecoratedDescriptor(_class2.prototype, "changeLinkButtonName", [_dec2], Object.getOwnPropertyDescriptor(_class2.prototype, "changeLinkButtonName"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "openBtnTitleEditModal", [_dec3], Object.getOwnPropertyDescriptor(_class2.prototype, "openBtnTitleEditModal"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "closeBtnTitleEditModal", [_dec4], Object.getOwnPropertyDescriptor(_class2.prototype, "closeBtnTitleEditModal"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "openPropEditModal", [_dec5], Object.getOwnPropertyDescriptor(_class2.prototype, "openPropEditModal"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "getTableExtraActions", [_dec6], Object.getOwnPropertyDescriptor(_class2.prototype, "getTableExtraActions"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "handleLinkButtonAddBtn", [_dec7], Object.getOwnPropertyDescriptor(_class2.prototype, "handleLinkButtonAddBtn"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "handleLinkButtonRemoveBtn", [_dec8], Object.getOwnPropertyDescriptor(_class2.prototype, "handleLinkButtonRemoveBtn"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "handleLinkButtonModalOk", [_dec9], Object.getOwnPropertyDescriptor(_class2.prototype, "handleLinkButtonModalOk"), _class2.prototype), _applyDecoratedDescriptor(_class2.prototype, "handleLinkButtonModalCancel", [_dec10], Object.getOwnPropertyDescriptor(_class2.prototype, "handleLinkButtonModalCancel"), _class2.prototype)), _class2)) || _class);
export { FieldProp as default };

if (process.env.NODE_ENV === 'production') {
  FieldProp.displayName = 'DynamicTable(FieldProp)';
}